<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<div class="media" th:each="comment:${comments}">
    <div class="media-left">
        <a th:href="|/space/${comment.user.id}|" target="_blank">
            <img class="media-object avatar-27" th:alt="${comment.user.nickname}" th:src="${comment.user.avatar}" >
        </a>
    </div>
    <div class="media-body">
        <div class="media-heading">
            <a th:href="|/space/${comment.user.id}|" target="_blank" th:text="${comment.user.nickname}"></a>
            <span th:if="${comment.toUser}" class="text-muted">回复 </span>
            <a th:if="${comment.toUser}" th:href="|/space/${comment.toUser.id}|" target="_blank" th:text="${comment.touser.nickname}"></a>
            <th:block th:if="${comment.toComment}" >
                : <span th:text="${comment.toComment.content}"></span>
            </th:block>

        </div>
        <div class="content"><p th:text="${comment.content}"></p></div>
        <div class="media-footer">
            <ul class="list-inline text-muted">
                <li th:text="${#dates.format(comment.createdAt,GlobalSetting.time.dateFormat+' '+GlobalSetting.time.timeFormat)}"></li>
                <li>
                    <!--/*已登录并且不是评论发布者自己 */-->
                    <th:block th:if="${currentUser!=null}">
                    <a th:if="${comment.user.id!=currentUser?.id}" href="#" class="ml-10 comment-reply" th:attr="data-source_id=|${comment.sourceId}|,data-to_user_id=|${comment.user.id}|,data-to_comment_id=|${comment.id}|,data-source_type=|${comment.sourceType}|,data-message=|回复 ${comment.user.nickname}|"><i class="fa fa-reply"></i> 回复</a>
                    </th:block>
                </li>
                <li class="pull-right">
                    <button class="btn btn-default btn-xs btn-support" th:attr="data-source_id=|${comment.id}|,data-support_num=|${#sets.size(comment.supports)}|,data-source_type=comment" ><i class="fa fa-thumbs-o-up"></i> <th:block th:text="${#sets.size(comment.supports)}"></th:block></button>
                </li>
            </ul>
        </div>

    </div>
</div>

<script type="text/javascript">
    $(function(){
        $(".widget-comment-list .btn-support").on("click",function(){
            var btn_support = $(this);
            var source_type = btn_support.data('source_type');
            var source_id = btn_support.data('source_id');
            var support_num = parseInt(btn_support.data('support_num'));
            $.get('/support/'+source_type+'/'+source_id,function(msg){
                if(msg =='supported'){
                    support_num++
                }else{
                    if(support_num>0 ) support_num--
                }
                btn_support.html('<i class="fa fa-thumbs-o-up"></i> '+support_num);
                btn_support.data('support_num',support_num);
            });
        })
    })
</script>

